<template>
  <div class="container">
    <el-row>
      <el-col class="top-search">
        <el-input v-model="selectObj.value" clearable class="w-400">
          <el-select slot="prepend" v-model="selectObj.key" class="w-180">
            <el-option :label="$t('member_id')" value="memberId"/>
            <el-option
              :label="$t('withdraw_id')"
              value="withdrawNum"
            />
            <el-option :label="$t('name')" value="applyNickName"/>
          </el-select>
        </el-input>
        <el-select
          v-model="listQuery.accountType"
          :placeholder="$t('please_select')"
          class="w-180"
        >
          <el-option :label="$t('account_type')" :value="null"/>
          <el-option :value="1" label="Alipay"/>
          <el-option :value="3" label="mpay"/>
          <el-option :value="4" label="huione"/>
          <el-option :value="5" label="pipay"/>
          <el-option :value="6" label="Wing"/>
          <el-option :value="7" label="PayGo"/>
          <el-option :value="101" label="ABA Bank"/>
        </el-select>
        <el-select
          v-model="listQuery.userLevel"
          :placeholder="$t('please_select')"
          class="w-180"
        >
          <el-option :label="$t('membership_type')" :value="null"/>
          <el-option v-for="(label, value) in USER_LEVEL_MAP" 
          :key="value" :label="$t(label)" :value="value" />
        </el-select>
        <el-select
          v-model="listQuery.withdrawType"
          :placeholder="$t('please_select')"
          class="w-180"
        >
          <el-option :label="$t('withdraw_type')" :value="null"/>
          <el-option
            :label="$t('coin_newcomer_withdraw')"
            :value="1"
          />
          <el-option :label="$t('coin_aba_withdraw')" :value="2"/>
          <el-option :label="$t('coin_fast_withdraw')" :value="3"/>
          <el-option
            :label="$t('change_newcomer_withdraw')"
            :value="4"
          />
          <el-option :label="$t('change_aba_withdraw')" :value="5"/>
          <el-option :label="$t('change_fast_withdraw')" :value="6"/>
          <el-option
            :label="$t('change_wemedia_withdraw')"
            :value="7"
          />
        </el-select>
        <el-select
          v-model="listQuery.applyStatus"
          class="w-180"
        >
          <el-option :label="$t('real_name_verified')" :value="null"/>
          <el-option
            :label="$t('not_verified')"
            :value="4"
          />
          <el-option :label="$t('to_be_vertified')" :value="0"/>
          <el-option :label="$t('verified')" :value="1"/>
          <el-option :label="$t('not_yet_pass')" :value="2"/>
        </el-select>
        <el-select
          v-if="reviewStatus == 1"
          v-model="listQuery.payStatus"
          :placeholder="$t('please_select')"
          class="w-180"
        >
          <el-option
            :label="$t('transaction_status')"
            :value="null"
          />
          <el-option :label="$t('no_transaction')" :value="0"/>
          <el-option :label="$t('transaction_success')" :value="1"/>
          <el-option
            :label="$t('transaction_failed_no_refound')"
            :value="2"
          />
          <el-option
            :label="$t('transaction_failed_refound')"
            :value="3"
          />
        </el-select>
        <label for="">{{ $t('date_range') }}:</label>
        <el-date-picker
          v-model="datePicker"
          class="w-240"
          type="daterange"
          align="right"
          value-format="yyyy-MM-dd"
        />
        <el-button type="warning" @click="clear()">{{ $t('empty') }}</el-button>
        <el-button type="primary" @click="search()">{{
          $t('search')
        }}</el-button>
      </el-col>
    </el-row>

    <el-row class="p-t-20 t-l-r">
      <el-col>
        <el-menu
          :default-active="reviewStatus"
          class="el-menu-demo"
          mode="horizontal"
          @select="switchApproveTab"
        >
          <el-menu-item index="0">{{ $t('audit_pending') }}</el-menu-item>
          <el-menu-item
            index="abnormal"
          >{{ $t('audit_pending') }}（{{ $t('abnormal_list') }}
            <el-tooltip
              :content="$t('including_users_who_are_currently_in_an_improper_status')"
              class="item"
              effect="dark"
              placement="bottom-start"
            >
              <i class="el-icon-question"/>
            </el-tooltip>
            ）</el-menu-item
            >
          <el-menu-item index="1">{{ $t('audit_accept') }}</el-menu-item>
          <el-menu-item index="3">{{ $t('has_been_rejected') }}</el-menu-item>
          <el-menu-item index="2">{{ $t('audit_reject') }}</el-menu-item>

          <!--按钮 排序+批量操作+刷新 -->
          <div class="sortandaction">
            <span class="money_summary">{{ $t('total_money') }}：${{ totalAmount }}</span>
            <el-button
              :class="{ 'sort-color': listQuery.orderField == 'create_time' }"
              class="m-l-20"
              @click="sort"
            >{{ $t('time') }}
              <span class="sort-arrow">
                <i
                  :class="{
                    'defalut-color':
                      listQuery.orderField == 'create_time' &&
                      listQuery.orderBy == 'desc'
                  }"
                  class="el-icon-caret-top sort-arrow__top"
                />
                <i
                  :class="{
                    'defalut-color':
                      listQuery.orderField == 'create_time' &&
                      listQuery.orderBy != 'desc'
                  }"
                  class="el-icon-caret-bottom sort-arrow__bottom"
                />
              </span>
            </el-button>
            <el-dropdown
              split-button
              type="primary"
              plain
              @command="batchProcessing"
            >{{ $t('batch_operate') }}
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  :command="1"
                  :disabled="reviewStatus == 1 || reviewStatus == 2 || reviewStatus == 3"
                >{{ $t('accept_audit') }}</el-dropdown-item
                >
                <el-dropdown-item
                  :command="2"
                  :disabled="reviewStatus == 1 || reviewStatus == 2 || reviewStatus == 3"
                >{{ $t('audit_reject') }}</el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
            <el-button
              v-if="hasExportAuth"
              type="primary"
              @click="toExport()"
            >{{ $t('export_doc') }}</el-button
            >
          </div>
        </el-menu>
      </el-col>
    </el-row>

    <el-row>
      <el-col class="p-t-20">
        <el-table
          v-loading="listLoading"
          :data="listData"
          border
          fit
          highlight-current-row
          @select="getSelectData"
          @select-all="getSelectData"
          @sort-change="sortChange"
        >
          <el-table-column type="selection" width="55"/>
          <el-table-column
            :label="$t('withdraw_id')"
            prop="withdrawNum"
            align="center"
            width="120"
          />
          <el-table-column
            :label="$t('member_id')"
            :sortable="
              reviewStatus == 0 || reviewStatus == 'abnormal' ? 'custom' : false
            "
            prop="memberId"
            align="center"
          />
          <el-table-column
            prop="isSubsidyFmt"
            align="center"
          >
            <template slot="header" slot-scope="scope">
              <span> {{ $t('is_sign_or_not') }} </span>
              <el-tooltip
                :content="$t('sign_up_wemedia_allowance')"
                class="item"
                effect="dark"
                placement="bottom-start"
              >
                <i class="el-icon-question"/>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('membership_type')"
            prop="userLevelFmt"
            align="center"
          />
          <el-table-column :label="$t('student_amount')" align="center">
            <template slot-scope="{ row }">
              <span>
                {{ row.childCount }} <br>
                <span
                  v-if="row.childCount > 0"
                  class="blue"
                  @click="CheckDisciple(row.childList)"
                >{{ $t('view_account_list') }}</span
                >
              </span>
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('history_withdraw_money') + '($)'"
            align="center"
          >
            <template slot-scope="{ row }">
              <span>
                {{ row.totalAmount }}<br>
                <span
                  v-if="row.totalAmount > 0"
                  class="blue"
                  @click="withdrawalHistory(row.memberId, row.totalAmount)"
                >{{ $t('view_detail') }}</span
              ></span
              >
            </template>
          </el-table-column>
          <el-table-column :label="$t('withdrawal_account')" align="center">
            <template slot-scope="{ row }">
              <span>
                {{ row.accountNum }} <br>
                <span
                  class="blue"
                  @click="checkTotalHistory(row)"
                >{{ $t('all_history') }}（{{ row.accountCount }}）</span
                >
              </span>
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('withdrawal_account_name')"
            prop="ownerName"
            align="center"
          />
          <el-table-column :label="$t('account_type')" align="center">
            <template slot-scope="{ row }">
              <span> {{ accountTypeMap[row.accountType] }}</span>
            </template>
          </el-table-column>
          <el-table-column :label="$t('real_name_verified')" align="center">
            <template slot-scope="{ row }">
              <el-tag> {{ realNameMap[row.applyStatus] }}</el-tag>
              <el-button
                v-if="row.applyStatus!=REALNAME_TYPE.NOT_VERIFIED"
                type="primary" size="mini"
                @click="checkRealNameDetail(row.memberId)"
              >{{$t('details')}}
              </el-button>
              <br/>
              <span> {{ $t('a_total_of_xxx_tnaot_accounts_')
                .replace('XXX', (row.idNumDupCount || 0)) }} </span>
            </template>
          </el-table-column>
          <el-table-column :label="$t('withdraw_time')" align="center">
            <template slot-scope="{ row }">
              <span> {{ row.createTime | fmtdate }}</span>
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('transfer_amount') + '($)'"
            prop="applyCashAmount"
            align="center"
          />
          <el-table-column
            :label="$t('transfer_fee')"
            prop="memberHandlingFee"
            align="center"
          />
          <el-table-column :label="$t('withdraw_type')" align="center">
            <template slot-scope="{ row }">
              <span> {{ withdrawTypeMap[row.withdrawType] }}</span>
            </template>
          </el-table-column>
          <el-table-column :label="$t('audited_status')" align="center">
            <template slot-scope="{ row }">
              <el-tag v-if="row.reviewStatus == 0" type="info">{{
                $t('audit_pending')
              }}</el-tag>
              <el-tag v-if="row.reviewStatus == 1" type="success">{{
                $t('audit_accept')
              }}</el-tag>
              <el-tag v-if="row.reviewStatus == 2" type="danger">{{
                $t('audit_reject')
              }}</el-tag>
              <el-tag v-if="row.reviewStatus == 3" type="danger">{{
                $t('has_been_rejected')
              }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            v-if="reviewStatus == 1"
            :label="$t('transferred_by')"
            prop="transferorNickName"
          />
          <el-table-column :label="$t('operation')" align="center" width="380">
            <template slot-scope="{ row }">
              <!-- 异常列表有异常查询按钮 -->
              <el-button
                v-if="reviewStatus == 'abnormal' && row.riskStatus > 1"
                type="danger"
                size="mini"
                @click="abnormalQuery(row.riskStatus, row.memberId)"
              >
                {{ $t('search_abnormal') }}
              </el-button>

              <el-button
                v-if="row.reviewStatus == 0"
                type="primary"
                size="mini"
                @click="pass(row.withdrawNum)"
              >
                {{ $t('accept_audit') }}
              </el-button>

              <el-button
                v-if="row.reviewStatus == 0"
                type="danger"
                size="mini"
                @click="nopass(row.withdrawNum)"
              >
                {{ $t('audit_reject') }}
              </el-button>
              <span v-if="row.reviewStatus == 1" class="m-r-10">{{
                payStatusMap[row.payStatus]
              }}</span>

              <el-button
                v-if="row.reviewStatus == 2"
                size="mini"
                type="warning"
                @click="checkNoPass(row.withdrawNum)"
              >
                {{ $t('reasons_for_not_passing') }}
              </el-button>

              <el-button
                v-if="row.reviewStatus == 3"
                size="mini"
                type="warning"
                @click="checkReject(row.withdrawNum)"
              >
                {{ $t('reasons_for_rejection') }}
              </el-button>

              <!-- 已审核列表 未转账状态下 wing mpay 可以自动转账 其他手动转账 -->
              <el-dropdown
                v-if="reviewStatus == 1 && row.payStatus == 0"
                size="mini"
                split-button
                type="primary"
                class="margin-right--15"
                @command="type => moreOpt(type, row)"
              >
                {{ $t('operation') }}
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item
                    v-if="row.accountType == 3 || row.accountType == 6"
                    command="1"
                  >{{ $t('auto_transfer') }}</el-dropdown-item
                  >
                  <el-dropdown-item command="2">{{
                    $t('manual_transfer')
                  }}</el-dropdown-item>
                  <el-dropdown-item command="3">{{
                    $t('reject_accepted_audit')
                  }}</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <el-button
                size="mini"
                type="primary"
                @click="userDetail(row.memberId)"
              >
                {{ $t('user_detail') }}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div v-if="total > 0" class="block fr">
          <el-pagination
            :current-page="listQuery.page"
            :page-sizes="[20, 50, 100]"
            :page-size="listQuery.size"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-col>
    </el-row>

    <!-- 徒弟名单 -->
    <el-dialog
      :title="$t('student_list')"
      :visible.sync="dialogVisible.apprentice"
      width="90%"
    >
      <el-table ref="apprentice" :data="apprenticeList" border fit highlight-current-row @sort-change="apprenticeSortChange">
        <el-table-column
          :label="$t('serial_number')"
          type="index"
          width="50">
          <template slot-scope="scope">
            <span>{{ (apprenticeQuery.page - 1) * apprenticeQuery.size + scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('student_member_id')"
          prop="memberId"
          align="center"
          width="120"
        />
        <el-table-column
          :label="$t('nickname')"
          prop="nickName"
          align="center"
          width="200"
        />
        <el-table-column
          :label="$t('phone_number')"
          prop="mobile"
          align="center"
          width="120"
        />
        <el-table-column
          :label="$t('registered_time')"
          prop="registerTime"
          align="center"
          width="180"
        />
        <el-table-column
          :label="$t('device_id')"
          sortable="custom"
          prop="deviceId"
          align="center"
          width="280"
        />
        <el-table-column
          :label="$t('ip_address')"
          sortable="custom"
          prop="ipAddress"
          align="center"
          width="120"
        />
        <el-table-column
          :label="$t('recently_login_phone')"
          prop="deviceModel"
          align="center"
          width="120"
        />
        <el-table-column
          :label="$t('recently_login_time')"
          prop="recentLoginTime"
          align="center"
          width="180"
        />
        <el-table-column :label="$t('status')" align="center">
          <template slot-scope="{ row }">
            <el-tag v-if="row.status == 'NORMAL'">{{ $t('normal') }}</el-tag>
            <el-tag v-if="row.status == 'GREY'" type="info">{{
              $t('grey_list')
            }}</el-tag>
            <el-tag v-if="row.status == 'BLACK'" type="danger">{{
              $t('black_list')
            }}</el-tag>
            <el-tag v-if="row.status == 'NOTSURE'" type="warning">{{
              $t('suspicious_situation')
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column :label="$t('operation')" align="center" width="120">
          <template slot-scope="{ row }">
            <el-button
              size="mini"
              type="primary"
              @click="userDetail(row.memberId)"
            >
              {{ $t('user_detail') }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div v-if="apprenticeQuery.total > 0" slot="footer" class="dialog-footer">
        <el-pagination
          :current-page="apprenticeQuery.page"
          :page-sizes="[15, 20, 30]"
          :page-size="apprenticeQuery.size"
          :total="apprenticeQuery.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="(val) => handleApprenticePageChange(val, 'size')"
          @current-change="(val) => handleApprenticePageChange(val, 'page')"
        />
      </div>
    </el-dialog>

    <!-- 历史成功提现明细 -->
    <el-dialog
      :title="withdrawTitle"
      :visible.sync="dialogVisible.withdraw"
      width="60%"
    >
      <el-table :data="withdrawList" border fit highlight-current-row>
        <el-table-column
          :label="$t('serial_number')"
          type="index"
          width="60"
        />
        <el-table-column
          :label="$t('withdraw_id')"
          prop="withdrawNum"
          align="center"
          width="120"
        />
        <el-table-column
          :label="$t('withdraw_account')"
          prop="accountNum"
          align="center"
        />
        <el-table-column :label="$t('account_type')" align="center">
          <template slot-scope="{ row }">
            <span> {{ accountTypeMap[row.accountType] }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('withdraw_time')" align="center">
          <template slot-scope="{ row }">
            <span> {{ row.createTime | fmtdate }}</span>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('transfer_amount')"
          prop="applyCashAmount"
          align="center"
        />
        <el-table-column
          :label="$t('transfer_fee')"
          prop="memberHandlingFee"
          align="center"
        />
        <el-table-column :label="$t('withdraw_type')" align="center">
          <template slot-scope="{ row }">
            <span> {{ withdrawTypeMap[row.withdrawType] }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <!-- 全部提现账号 -->
    <el-dialog
      :visible.sync="dialogVisible.account"
      :title="$t('all_withdraw_account')"
    >
      <el-row>
        <label>{{ $t('current_withdraw_account') }}: </label>
        <span>{{ currentAccount }}</span>
        <span> {{ currentOwnerName }} </span>
      </el-row>
      <el-row style="margin: 10px 0">
        <label>{{ $t('history_withdraw_account') }}: </label>
      </el-row>
      <el-table v-if="accountList.length" :data="accountList" border fit>
        <el-table-column
          :label="$t('serial_number')"
          type="index"
          width="60px"
          align="center"
        />
        <el-table-column
          :label="$t('account')"
          property="accountNum"
          align="center"
        />
        <el-table-column
          :label="$t('bind_time')"
          property="createTime"
          align="center"
        />
        <el-table-column
          :label="$t('user_id_ever_bind_phone')"
          property="otherBindUser"
          align="center"
        >
          <template slot-scope="{ row }">
            <span v-if="row.otherBindUser"> {{ row.otherBindUser }} </span>
            <span v-else> {{ $t('none') }} </span>
          </template>
        </el-table-column>
      </el-table>
      <el-row v-else>{{ $t('temporally_none') }}</el-row>
    </el-dialog>

    <!-- 手动转账 -->
    <el-dialog
      :visible.sync="dialogVisible.transfer"
      :close-on-click-modal="false"
      :title="$t('transfer_confirm')"
      width="500px"
    >
      <el-form :model="transferForm" label-width="140px">
        <el-form-item :label="$t('transaction_id')">
          <el-input v-model="transferForm.transNum" class="w-240"/>
        </el-form-item>
        <el-form-item :label="$t('pay_gateway_fee')">
          <el-input-number
            v-model="transferForm.handlingFee"
            size="small"
            class="global-input-number w-240"
          />
        </el-form-item>
        <el-form-item :label="$t('transaction_time')">
          <el-date-picker
            v-model="transferForm.transferTime"
            :placeholder="$t('select_date_time')"
            class="w-240"
            type="datetime"
            value-format="timestamp"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisible.transfer = false">{{
          $t('cancel')
        }}</el-button>
        <el-button
          :loading="btnLoading.transfer"
          :disabled="btnLoading.transfer"
          type="primary"
          size="small"
          @click="submit"
        >{{ $t('confirm') }}</el-button
        >
      </span>
    </el-dialog>

    <!-- 不通过理由 -->
    <el-dialog
      :title="$t('reasons_for_not_passing')"
      :visible.sync="dialogVisible.reject"
      width="860px"
    >
      <div v-if="disableReason">
        <p v-if="rejectObj.reason!==4"> {{ reasonMap[rejectObj.reason] }} </p>
        <p v-if="rejectObj.reason==4"> {{ rejectObj.customReason }} </p>
      </div>
      <div v-if="!disableReason">
        <el-radio-group v-model="rejectObj.reason" class="radio_choose">
          <el-radio :label="8">{{ $t('your_account_is_suspected_of_fraudulently_earning_coins') }}</el-radio>
          <el-radio :label="9">{{ $t('your_account_has_been_frozen_by_the_system_and_cannot_be_withdrawn') }}</el-radio>
          <el-radio :label="10">{{ $t('after_applying_for_withdrawal') }}</el-radio>
          <el-radio :label="11">{{ $t('due_to_the_abnormal_record_of_the_account') }}</el-radio>
          <el-radio :label="12">{{ $t('your_realname_authentication_i') }}</el-radio>
          <el-radio :label="4">{{ $t('custom') }}</el-radio>
        </el-radio-group>
        <el-input
          v-model="rejectObj.customReason"
          :disabled="disableReason || rejectObj.reason != 4"
          :placeholder="$t('please_fill_in_the_reason_for_not_passing_and_send_it_to_the_user_in')"
          type="textarea"
          class="w-800"
        />
      </div>
      <p class="p-t-20"/>
      <p class="title">{{ $t('remark') }}</p>
      <el-input
        v-model="rejectObj.remark"
        :disabled="disableReason"
        :placeholder="$t('remarks_are_only_used_as_background_records')"
        type="textarea"
        class="w-800"
      />
      <div v-if="!disableReason" slot="footer" class="dialog-footer">
        <el-button
          :disabled="btnLoading.reject"
          :loading="btnLoading.reject"
          @click="dialogVisible.reject = false"
        >{{ $t('cancel') }}</el-button
        >
        <el-button
          :disabled="btnLoading.reject"
          :loading="btnLoading.reject"
          type="primary"
          @click="sureReject"
        >{{ $t('confirm') }}</el-button
        >
      </div>
    </el-dialog>

    <!-- 已审核驳回 -->
    <el-dialog
      :title="$t('reasons_for_rejection')"
      :visible.sync="dialogVisible.reviewReject"
      width="860px"
    >
      <div v-if="!disableReject">
        <el-radio-group v-model="rejectTransferForm.withdrawReason" class="radio_choose">
            <el-radio :label="1">{{ $t('your_withdrawal_account_or_name_is_wrong') }}</el-radio>
            <el-radio :label="2">{{ $t('there_is_some_problem_with_your_withdrawal_account') }}</el-radio>
            <el-radio :label="4">{{ $t('custom') }}</el-radio>
          </el-radio-group>
          <el-input
            v-model="rejectTransferForm.customReason"
            :disabled="rejectTransferForm.withdrawReason!=4"
            :placeholder="$t('please_fill_in_the_rejection_reason')"
            type="textarea"
            class="w-800"
          />
          <p class="p-t-20"/>
          <p class="title">{{ $t('remark') }}</p>
          <el-input
            v-model="rejectTransferForm.withdrawRemark"
            type="textarea"
            class="w-800"
          />
      </div>
      <div v-if="!disableReject" slot="footer" class="dialog-footer">
          <el-button
            :disabled="btnLoading.reject"
            :loading="btnLoading.reject"
            @click="dialogVisible.reviewReject = false"
          >{{ $t('cancel') }}</el-button
          >
          <el-button
            :disabled="btnLoading.reject"
            :loading="btnLoading.reject"
            type="primary"
            @click="confirmReject"
          >{{ $t('confirm') }}</el-button
          >
      </div>

      <div v-if="disableReject">
        <p v-if="rejectObj.reason!==4"> {{ rejectMap[rejectObj.reason] }} </p>
        <p v-if="rejectObj.reason==4"> {{ rejectObj.customReason }} </p>
        <p class="p-t-20"/>
        <p class="title">{{ $t('remark') }}</p>
        <el-input
          v-model="rejectObj.remark"
          disabled
          type="textarea"
          class="w-800"
        />
      </div>
    </el-dialog>

    <!-- 实名认证 -->
    <el-dialog
      :title="$t('user_real_name_information')"
      :visible.sync="dialogVisible.realName"
      :close-on-click-modal="false"
      width="960px">
      <el-form label-width="200px">
        <el-form-item :label="$t('name')">
          <span> {{ realNameObj.realName }}  </span>
        </el-form-item>
        <el-form-item :label="$t('id_number')">
          <span> {{realNameObj.idNum}}  </span>
        </el-form-item>
        <el-form-item :label="$t('date_of_birth')">
          <span> {{realNameObj.birthday}}  </span>
        </el-form-item>
        <el-form-item :label="$t('gender')">
          <span v-if="realNameObj.sex == 0"> {{ $t('unknown') }}  </span>
          <span v-if="realNameObj.sex == 1"> {{ $t('male') }}  </span>
          <span v-if="realNameObj.sex == 2"> {{ $t('female') }}  </span>
        </el-form-item>
        <el-form-item :label="$t('id_photo')">
          <el-image :preview-src-list="[realNameObj.frontIdPhoto, realNameObj.reverseIdPhoto, realNameObj.handheldIdPhoto]" class="realname-img" :src="realNameObj.frontIdPhoto" />
          <el-image :preview-src-list="[realNameObj.frontIdPhoto, realNameObj.reverseIdPhoto, realNameObj.handheldIdPhoto]" class="realname-img" :src="realNameObj.reverseIdPhoto" />
        </el-form-item>
        <el-form-item :label="$t('hold_id_photo')">
          <el-image :preview-src-list="[realNameObj.frontIdPhoto, realNameObj.reverseIdPhoto, realNameObj.handheldIdPhoto]" class="realname-img" :src="realNameObj.handheldIdPhoto" />
        </el-form-item>
      </el-form>

      <h2 class="p-b-15"> {{$t('associated_account')}} </h2>
      <el-table :data="relatedList" border fit highlight-current-row>
       <el-table-column
          :label="$t('serial_number')"
          type="index"
          width="60"
        />
          <el-table-column
            :label="$t('account_nickname')"
            prop="nickName"
            align="center"
          />
          <el-table-column
            :label="$t('member_id')"
            prop="memberId"
            align="center"
          />
          <el-table-column
            :label="$t('number_of_withdrawals')"
            prop="count"
            align="center"
          />
      </el-table>

      <p class="realname-tip" v-if="realNameObj.applyStatus==REALNAME_TYPE.NO_PASS">{{ $t('the_users_real_name_informatio') }}</p>

      <span slot="footer" class="dialog-footer" v-if="realNameObj.applyStatus==REALNAME_TYPE.PENDING_VERIFIED">
        <el-button
          :loading="btnLoading.realName"
          :disabled="btnLoading.realName"
          type="primary"
          @click="submitRealName(realNameObj.id, 2)"
        >{{ $t('do_not_pass_real_name_audit') }}</el-button
        >
        <el-button
          :loading="btnLoading.realName"
          :disabled="btnLoading.realName"
          type="primary"
          @click="submitRealName(realNameObj.id, 1)"
        >{{ $t('confirm_realname_information') }}</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import timeUtils from '@/utils/timeHandle.js';
import { getToken } from '@/utils/auth';
import {
  getWithdrawListApi,
  getRejectReasonApi,
  getNoPassReasonApi,
  wtithdrawAccountApi,
  updateApi,
  updateBatchApi,
  transferApi,
  remarkUpdateApi,
  getVerifyDetailApi,
  pastVerifyApi
} from '@/api/realization-audit.js';
import { getNav } from '@/api/menu';

const REALNAME_TYPE = {
  PENDING_VERIFIED: 0,
  VERIFIED: 1,
  NO_PASS: 2,
  NOT_VERIFIED: 4
};

const USER_LEVEL_MAP = {
  1: 'none_self_media_users',
  2: 'general_self_media_users',
  3: 'big_v_self_media_users'
};

export default {
  name: 'WithdrawReview',

  data() {
    return {
      USER_LEVEL_MAP,
      REALNAME_TYPE,
      datePicker: [
        timeUtils.timeHandle(
          new Date().getTime() - 3600 * 1000 * 24 * 6,
          'date'
        ),
        timeUtils.timeHandle(new Date().getTime(), 'date')
      ],
      selectObj: {
        key: 'memberId',
        value: null
      },
      dialogVisible: {
        withdraw: false,
        reject: false,
        apprentice: false,
        account: false,
        transfer: false,
        reviewReject: false,
        realName: false
      },
      btnLoading: {
        reject: false,
        transfer: false,
        realName: false
      },
      reviewStatus: '0',
      listQuery: {
        userLevel: null,
        applyStatus: null, // 0待认证 1已认证 2不通过 4未提交认证
        accountType: null, // 提现账号类型
        withdrawType: null, // 提现类型
        reviewStatus: 0, // 审核状态：0待审核 1已审核 2不通过
        abnormal: false, // 是否异常
        payStatus: null,
        beginTime: null,
        endTime: null,
        orderBy: 'desc', // desc:降序，asc:升序
        orderField: 'create_time',
        size: 20,
        page: 1
      },

      accountTypeMap: {
        1: 'Alipay',
        3: 'mpay',
        4: 'huione',
        5: 'pipay',
        6: 'Wing',
        7: 'PayGo',
        101: 'ABA Bank'
      },

      payStatusMap: {
        0: this.$t('no_transaction'),
        1: this.$t('transaction_success'),
        2: this.$t('transaction_failed_no_refound'),
        3: this.$t('transaction_failed_refound')
      },

      withdrawTypeMap: {
        1: this.$t('coin_newcomer_withdraw'),
        2: this.$t('coin_aba_withdraw'),
        3: this.$t('coin_fast_withdraw'),
        4: this.$t('change_newcomer_withdraw'),
        5: this.$t('change_aba_withdraw'),
        6: this.$t('change_fast_withdraw'),
        7: this.$t('change_wemedia_withdraw')
      },

      reasonMap: {
        1: this.$t('apply_rejected_apply_again'),
        2: this.$t('account_no_access_to_withdraw_contact_customer_service'),
        3: this.$t('others'),
        5: this.$t('account_suspend_with_abused_coin'),
        6: this.$t('change_charge_can_only_apply_bind_phone'),
        7: this.$t('withdraw_failed_name_account_no_consistent'),
        8: this.$t('your_account_is_suspected_of_fraudulently_earning_coins'),
        9: this.$t(
          'your_account_has_been_frozen_by_the_system_and_cannot_be_withdrawn'
        ),
        10: this.$t('after_applying_for_withdrawal'),
        11: this.$t('due_to_the_abnormal_record_of_the_account'),
        12: this.$t('your_realname_authentication_i')
      },

      rejectMap: {
        1: this.$t('your_withdrawal_account_or_name_is_wrong'),
        2: this.$t('there_is_some_problem_with_your_withdrawal_account')
      },

      realNameMap: {
        0: this.$t('to_be_vertified'),
        1: this.$t('verified'),
        2: this.$t('not_yet_pass'),
        4: this.$t('not_verified')
      },

      listLoading: false,
      listData: [],
      total: 0,
      totalAmount: 0,
      apprenticeList: [],
      currentApprenticeList: [],
      apprenticeQuery: {
        page: 1,
        size: 15,
        total: 0
      },
      withdrawList: [],
      accountList: [],
      withdrawTitle: '',
      currentAccount: '', // 当前账号
      currentOwnerName: '', // 当前账户名
      isCache: false,
      rejectObj: {
        withdrawNum: null,
        status: 2,
        reason: 8,
        customReason: null,
        remark: null
      },
      selectedNewsData: [],
      isBatch: false, // 是否批量操作

      // 手动转账
      transferForm: {
        withdrawNum: null,
        transferTime: null,
        transNum: null, // 交易流水号
        handlingFee: 0, // 支付网关费用
        transferStatus: 1, // 转账状态 1 成功 2失败 3失败已退款
        transferType: 2 // 转账类型 1 自动 2 手动
      },

      // 已审核 审核驳回
      rejectTransferForm: {
        withdrawNum: null,
        transferStatus: 2,
        withdrawReason: 1,
        customReason: null,
        withdrawRemark: null
      },
      disableReason: false, // 不通过理由查看 不能更改原因
      disableReject: false, // 驳回原因查看
      hasExportAuth: false, // 默认没有导出权限
      realNameObj: {
        id: '230223106198030089',
        memberId: '895738',
        mediaUserId: '1336912929357856',
        idType: 1,
        realName: '钢筋22',
        idNum: '11',
        birthday: null,
        sex: 0,
        frontIdPhoto:
          'http://tnaot-test.oss-cn-hongkong.aliyuncs.com/image/2020/03/14/4eddf5633ab44548a2276ba05aca9a2b.png',
        reverseIdPhoto: '',
        handheldIdPhoto: '',
        applyStatus: 2,
        reviewerId: '244',
        createTime: 1632452598583,
        updateTime: 1632900620227,
        updateBy: '244'
      },
      relatedList: [
        {
          memberId: '895739',
          nickName: '11gfgf',
          count: 2
        },
        {
          memberId: '895742',
          nickName: '大V啊',
          count: 3
        }
      ]
    };
  },

  watch: {
    // 从用户详情页返回需要缓存页面
    $route(to, from) {
      if (
        to.name == 'WithdrawalReview'
        && (from.name == 'defaultRules'
          || from.name == 'userDetail'
          || from.name == 'exceptionUserManagement'
          || from.name == 'whiteList')
      ) {
        this.isCache = true;
      } else {
        this.isCache = false;
      }
    }
  },

  created() {
    this.getList();
  },

  activated() {
    if (!this.isCache) {
      this.reviewStatus = '0';
      this.clear();
      this.datePicker = [
        timeUtils.timeHandle(
          new Date().getTime() - 3600 * 1000 * 24 * 6,
          'date'
        ),
        timeUtils.timeHandle(new Date().getTime(), 'date')
      ];
      this.getList();
      this.checkExportAuth();
    }
  },

  methods: {
    async checkExportAuth() {
      const { code, data } = await getNav();
      if (code == 200) {
        this.hasExportAuth = !!(
          data && data.permission.includes('data_withdrawal_export')
        );
      }
    },

    getSelectData(data) {
      this.selectedNewsData = data;
    },

    search() {
      this.listQuery.page = 1;
      this.getList();
    },

    // 批量操作
    async batchProcessing(status) {
      if (this.selectedNewsData.length == 0) {
        this.$message.warning(this.$t('please_select_order'));
        return;
      }

      this.isBatch = true;

      if (status == 1) {
        try {
          const action = await this.$confirm(
            this.$t('are_you_sure_to_batch_accept_audit'),
            this.$t('tips'),
            {
              confirmButtonText: this.$t('confirm'),
              cancelButtonText: this.$t('cancel'),
              type: 'warning'
            }
          );

          if (action == 'confirm') {
            const { selectedNewsData } = this;
            const query = selectedNewsData.map(item => {
              const obj = {
                withdrawNum: item.withdrawNum,
                status: 1
              };
              return obj;
            });
            this.batchOperation(1, query);
          }
          // eslint-disable-next-line no-empty
        } catch (e) {}
      } else {
        this.rejectObj = {
          withdrawNum: null,
          status: 2,
          reason: 8,
          customReason: null,
          remark: null
        };
        this.dialogVisible.reject = true;
        this.disableReason = false;
      }
    },

    // 清空筛选条件
    clear() {
      this.listQuery = {
        userLevel: null,
        applyStatus: null,
        accountType: null, // 提现账号类型
        withdrawType: null, // 提现类型
        reviewStatus: 0, // 审核状态：0待审核 1已审核 2不通过
        abnormal: false, // 是否异常
        payStatus: null,
        beginTime: null,
        endTime: null,
        orderBy: 'desc', // desc:降序，asc:升序
        orderField: 'create_time',
        size: 20,
        page: 1
      };
      this.datePicker = [];
      this.selectObj = {
        key: 'memberId',
        value: null
      };
    },

    async getList() {
      delete this.listQuery.memberId;
      delete this.listQuery.withdrawNum;
      delete this.listQuery.applyNickName;

      if (this.selectObj.value) {
        if (
          this.selectObj.key != 'applyNickName'
          && this.selectObj.value % 1 != 0
        ) {
          this.$message.warning(
            this.$t('member_id_or_withdraw_account_id_must_be_number')
          );
          return;
        }
        this.listQuery[this.selectObj.key] = this.selectObj.value;
      }

      this.listQuery.beginTime =
        (this.datePicker && this.datePicker[0]) || null;
      this.listQuery.endTime = (this.datePicker && this.datePicker[1]) || null;

      if (this.reviewStatus !== 'abnormal') {
        this.listQuery.reviewStatus = Number(this.reviewStatus);
        this.listQuery.abnormal = false;
      } else {
        this.listQuery.reviewStatus = 0;
        this.listQuery.abnormal = true;
      }

      this.listQuery.payStatus =
        this.reviewStatus == 1 ? this.listQuery.payStatus : null;

      try {
        this.listLoading = true;
        const { code, data } = await getWithdrawListApi(this.listQuery);
        this.listLoading = false;
        if (code == 200) {
          this.listData = this.serializeList(data.list) || [];
          this.total = Number(data.count) || 0;
          this.totalAmount = data.totalAmount;
        }
      } catch (e) {
        this.listLoading = false;
      }
    },

    serializeList(list) {
      const SUBSIDY_MAP = { true: 'yes', false: 'no' };
      const { USER_LEVEL_MAP } = this;
      return list.map(t => ({
        ...t,
        isSubsidyFmt: this.$t(SUBSIDY_MAP[t.isSubsidy]),
        userLevelFmt: this.$t(USER_LEVEL_MAP[t.userLevel])
      }));
    },

    sortChange({ column, prop, order }) {
      if (order) {
        this.listQuery.orderField = 'member_id';
        this.listQuery.orderBy = order == 'ascending' ? 'asc' : 'desc';
      } else {
        this.listQuery.orderField = null;
      }

      this.listQuery.page = 1;
      this.getList();
    },

    sort() {
      this.listQuery.orderBy =
        this.listQuery.orderBy == 'desc' ? 'asc' : 'desc';
      this.listQuery.orderField = 'create_time';
      this.listQuery.page = 1;
      this.getList();
    },

    switchApproveTab(val) {
      this.selectedNewsData = [];
      this.reviewStatus = val;
      this.listQuery.page = 1;
      this.getList();
    },

    // 历史成功提现明细
    async withdrawalHistory(memberId, totalAmount) {
      this.withdrawTitle = `${this.$t(
        'history_withdraw_success_detail'
      )}`.replace('N', totalAmount);

      try {
        const { code, data } = await getWithdrawListApi({
          memberId,
          page: 1,
          size: 1000,
          payStatus: 1,
          orderBy: 'desc',
          orderField: 'create_time'
        });
        if (code == 200) {
          this.withdrawList = data.list || [];
          this.dialogVisible.withdraw = true;
        } else {
          this.$message.warning(this.$t('fetch_data_failed_try_later'));
        }
        // eslint-disable-next-line no-empty
      } catch (e) {}
    },

    handleSizeChange(val) {
      this.listQuery.size = val;
      this.getList();
    },

    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.getList();
    },

    async checkTotalHistory(row) {
      this.currentAccount = row.accountNum;
      this.currentOwnerName = row.ownerName;
      try {
        const { code, data } = await wtithdrawAccountApi({
          memberId: row.memberId
        });
        if (code == 200) {
          this.accountList = data || [];
          this.dialogVisible.account = true;
        }
        // eslint-disable-next-line no-empty
      } catch (e) {}
    },

    // 查看徒弟列表
    CheckDisciple(list) {
      this.currentApprenticeList = list || [];
      this.apprenticeQuery.total = list && list.length ? list.length : 0;
      this.apprenticeQuery.page = 1;
      this.getApprentLiceList();
      this.dialogVisible.apprentice = true;
      setTimeout(() => {
        this.$refs.apprentice.clearSort();
      }, 100);
    },

    // 跳转用户详情
    userDetail(memberId) {
      const url = `${process.env.DATA_ADMIN}/#/userExceptionFilter/userDetail?memberId=${memberId}`;
      window.open(url);
    },

    // 异常查询 1-正常、2-疑似异常、3-灰名单、4-黑名单、5-白名单',
    abnormalQuery(riskStatus, memberId) {
      const pathMap = {
        2: '/userExceptionFiltering/defaultRules',
        3: '/userExceptionFiltering/exceptionUserManagement',
        4: '/userExceptionFiltering/exceptionUserManagement',
        5: '/userExceptionFiltering/whiteList'
      };

      this.$router.push({
        path: pathMap[riskStatus],
        query: {
          memberId
        }
      });
    },

    async pass(withdrawNum) {
      try {
        const action = await this.$confirm(
          this.$t('are_you_sure_to_accept_audit'),
          this.$t('tips'),
          {
            confirmButtonText: this.$t('confirm'),
            cancelButtonText: this.$t('cancel'),
            type: 'warning'
          }
        );

        if (action == 'confirm') {
          this.passWithdraw(withdrawNum, 1);
        }
        // eslint-disable-next-line no-empty
      } catch (e) {}
    },

    nopass(withdrawNum) {
      this.rejectObj = {
        withdrawNum,
        status: 2,
        reason: 8,
        customReason: null,
        remark: null
      };
      this.isBatch = false;
      this.dialogVisible.reject = true;
      this.disableReason = false;
    },

    sureReject() {
      const {
        withdrawNum,
        status,
        reason,
        remark,
        customReason
      } = this.rejectObj;

      if (reason == 4 && (!customReason || customReason.trim() == '')) {
        this.$message.warning(
          this.$t(
            'please_fill_in_the_reason_for_not_passing_and_send_it_to_the_user_in'
          )
        );
        return;
      }

      if (this.disableReason) {
        // 修改备注
        const query = {
          remark,
          orderIds: withdrawNum
        };
        this.updateRemark(query);
      } else if (this.isBatch) {
        const { selectedNewsData } = this;
        const query = selectedNewsData.map(item => {
          const obj = {
            withdrawNum: item.withdrawNum,
            status: 2,
            reason,
            remark,
            customReason
          };
          return obj;
        });
        this.batchOperation(2, query);
      } else {
        this.passWithdraw(withdrawNum, status, reason, remark, customReason);
      }
    },

    async checkNoPass(withdrawNum) {
      try {
        const { code, data } = await getNoPassReasonApi({ id: withdrawNum });
        if (code == 200) {
          this.rejectObj.withdrawNum = withdrawNum;
          this.rejectObj.reason = data.reason;
          this.rejectObj.remark = data.remark || null;
          this.rejectObj.customReason = data.customReason || null;
          this.dialogVisible.reject = true;
          this.disableReason = true;
        }
        // eslint-disable-next-line no-empty
      } catch (e) {}
    },

    async checkReject(withdrawNum) {
      try {
        const { code, data } = await getRejectReasonApi({ id: withdrawNum });
        if (code == 200) {
          this.rejectObj.withdrawNum = withdrawNum;
          this.rejectObj.reason = data.reason;
          this.rejectObj.remark = data.remark || null;
          this.rejectObj.customReason = data.customReason || null;
          this.dialogVisible.reviewReject = true;
          this.disableReject = true;
        }
        // eslint-disable-next-line no-empty
      } catch (e) {}
    },

    // 单个审核 status 1通过 2不通过
    async passWithdraw(withdrawNum, status, reason, remark, customReason) {
      if (status == 2) {
        this.btnLoading.reject = true;
      }

      try {
        const { state, error_msg } = await updateApi({
          withdrawNum,
          status,
          reason,
          remark,
          customReason
        });

        this.btnLoading.reject = false;

        if (state == 1) {
          if (status == 2) {
            this.dialogVisible.reject = false;
          }
          this.$message.success(this.$t('operate_successfully'));
          this.getList();
        } else {
          this.$message.warning(error_msg);
        }
      } catch (e) {
        this.btnLoading.reject = false;
      }
    },

    async updateRemark(query) {
      this.btnLoading.reject = true;
      try {
        const { state, error_msg } = await remarkUpdateApi(query);
        this.btnLoading.reject = false;
        if (state == 1) {
          this.dialogVisible.reject = false;
          this.$message.success(this.$t('operate_successfully'));
          this.getList();
        } else {
          this.$message.warning(error_msg);
        }
      } catch (e) {
        this.btnLoading.reject = false;
      }
    },

    async batchOperation(status, query) {
      if (status == 2) {
        this.btnLoading.reject = true;
      }
      try {
        const { state, error_msg } = await updateBatchApi(query);
        this.btnLoading.reject = false;
        if (state == 1) {
          if (status == 2) {
            this.dialogVisible.reject = false;
          }
          this.$message.success(this.$t('operate_successfully'));
          this.getList();
        } else {
          this.$message.warning(error_msg);
        }
      } catch (e) {
        this.btnLoading.reject = false;
      }
    },

    // 手动转账确定
    submit() {
      const { transferTime, transNum, handlingFee } = this.transferForm;
      if (!transferTime || !transNum || handlingFee === undefined) {
        this.$message.warning(
          this.$t('transaction_id_gateway_id_transaction_time_can_not_empty')
        );
        return;
      }
      this.transfer(2, this.transferForm);
    },

    // 已审核驳回
    confirmReject() {
      const { withdrawReason, customReason } = this.rejectTransferForm;
      if (withdrawReason == 4 && (!customReason || customReason.trim() == '')) {
        this.$message.warning(this.$t('please_fill_in_the_rejection_reason'));
        return;
      }
      this.transfer(3, this.rejectTransferForm);
    },

    // 已审核列表 未转账下的操作 type 1 自动转账 2 手动转账 3 驳回
    moreOpt(type, row) {
      const { withdrawNum } = row;
      if (type == 1) {
        const query = {
          withdrawNum,
          transferStatus: 1,
          transferType: 1
        };
        this.transfer(type, query);
      } else if (type == 2) {
        this.transferForm = {
          withdrawNum,
          transferTime: null,
          transNum: null, // 交易流水号
          handlingFee: 0, // 支付网关费用
          transferStatus: 1, // 转账状态 1 成功 2失败 3失败已退款
          transferType: 2 // 转账类型 1 自动 2 手动
        };
        this.dialogVisible.transfer = true;
      } else {
        this.rejectTransferForm = {
          withdrawNum,
          transferStatus: 2,
          withdrawReason: 1,
          customReason: null,
          withdrawRemark: null
        };
        this.dialogVisible.reviewReject = true;
      }
    },

    async transfer(type, query) {
      if (type == 2) {
        this.btnLoading.transfer = true;
      } else if (type == 3) {
        this.btnLoading.reject = true;
      }

      try {
        const { state, error_msg } = await transferApi(query);
        if (state == 1) {
          this.$message.success(this.$t('operate_successfully'));
          this.getList();
          if (type == 2) {
            this.btnLoading.transfer = false;
            this.dialogVisible.transfer = false;
          } else if (type == 3) {
            this.btnLoading.reject = false;
            this.dialogVisible.reviewReject = false;
          }
        } else {
          this.$message.warning(error_msg);
        }
      } catch (e) {
        this.btnLoading.transfer = false;
        this.btnLoading.reject = false;
      }
    },

    handleApprenticePageChange(val, key) {
      this.apprenticeQuery[key] = val;
      this.getApprentLiceList();
    },

    getApprentLiceList() {
      const { size, page } = this.apprenticeQuery;
      const start = (page - 1) * size;
      const end = page * size;
      const list = this.currentApprenticeList.slice(start, end);
      this.apprenticeList = [...list];
    },

    apprenticeSortChange({ column, prop, order }) {
      this.apprenticeSort(prop, order);
    },

    apprenticeSort(key, order) {
      const { currentApprenticeList } = this;
      currentApprenticeList.sort((a, b) =>
        (order == 'ascending'
          ? a[key].localeCompare(b[key])
          : b[key].localeCompare(a[key])));
      this.currentApprenticeList = currentApprenticeList;
      this.getApprentLiceList();
    },

    async checkRealNameDetail(memberId) {
      try {
        const { state, result, error_msg } = await getVerifyDetailApi({
          memberId,
          checkTimes: 1
        });
        if (state == 1) {
          this.realNameObj = result.verified || {};
          this.relatedList = result.relatedList || [];
          this.dialogVisible.realName = true;
        } else {
          this.$message.warning(error_msg);
        }
      } catch (e) {}
    },

    async submitRealName(id, applyStatus) {
      if (this.btnLoading.realName) return;
      this.btnLoading.realName = true;

      try {
        const { state, error_msg } = await pastVerifyApi({
          id,
          applyStatus
        });
        if (state == 1) {
          this.$message.success(this.$t('operate_successfully'));
          this.dialogVisible.realName = false;
          this.getList();
        } else {
          this.$message.warning(error_msg);
        }
      } catch (e) {
      } finally {
        this.btnLoading.realName = false;
      }
    },

    toExport() {
      const xhh = new XMLHttpRequest();
      xhh.open('post', `${process.env.BASE_API}/v1/withdrawApplyExport`);
      xhh.setRequestHeader('X-Token', getToken());
      xhh.setRequestHeader('content-type', 'application/json;charset=UTF-8');
      xhh.responseType = 'blob';
      xhh.onreadystatechange = function () {
        if (xhh.readyState === 4 && xhh.status === 200) {
          const blob = new Blob([xhh.response]);
          const csvUrl = URL.createObjectURL(blob);
          const link = document.createElement('a');
          let fileName = xhh
            .getResponseHeader('Content-Disposition')
            .split(';')[1]
            .split('fileName=')[1];
          const fileNameUnicode = xhh
            .getResponseHeader('Content-Disposition')
            .split('fileName*=')[1];
          if (fileNameUnicode) {
            fileName = decodeURIComponent(fileNameUnicode.split("''")[1]);
          }

          document.body.appendChild(link);
          link.href = csvUrl;
          link.target = '_blank';
          link.id = 'linkId';
          link.className = 'linkId';
          link.download = decodeURI(fileName);
          document.getElementById('linkId').click();
          link.remove();
        }
      };
      const query = { ...this.listQuery, page: 1, size: 100000 };
      xhh.send(JSON.stringify(query));
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  padding: 15px;
  .top-search {
    margin: 10px 0;
    label {
      font-size: 12px;
      font-weight: 400;
      margin-right: 5px;
    }
  }
  .t-l-r {
    text-align: right;
  }
  .m-r-10 {
    margin-right: 10px;
  }
  .w-180 {
    width: 180px;
  }
  .w-240 {
    width: 240px;
  }
  .w-400 {
    width: 400px;
  }
  .w-600 {
    width: 600px;
  }
  .w-800 {
    width: 800px;
  }
  .p-t-20 {
    padding-top: 20px;
  }

  .m-l-20 {
    margin-left: 20px;
  }

  .label {
    display: inline-block;
    width: 130px;
    text-align: right;
    margin-right: 15px;
  }

  .radio_choose {
    margin: 0 0 10px 0;
    .el-radio {
      display: block;
      padding: 5px 0;
      white-space: normal;
    }
  }

  .title {
    line-height: 2;
  }

  .blue {
    color: #0000ff;
    cursor: pointer;
  }

  .fr {
    float: right;
    padding-top: 20px;
  }

  .sort-arrow {
    padding-right: 10px;
    &__top {
      position: absolute;
      top: 20px;
    }
    &__bottom {
      position: absolute;
      top: 28px;
    }
  }

  .defalut-color {
    color: #606266;
  }

  .sort-color {
    color: #409eff;
  }

  .sortandaction {
    float: right;
    margin-top: 12px;
  }

  .money_summary {
    display: inline-block;
    font-size: 16px;
    color: #606266;
    min-width: 130px;
    text-align: left;
  }

  .realname-img {
    display: inline-block;
    width: 298px;
    height: 232px;
    object-fit: cover;
    margin-right: 15px;
  }

  .realname-tip {
    color: #d9001b;
    font-size: 16px;
    text-align: center;
    line-height: 2;
  }
}
</style>
